<template>
    <div class="app-container">
        <!-- 表格-条件筛区域  -->
        <div class="filter-container">
            <el-input v-model="searchParam.SEARCH_LIKE_name" class="filter-item" placeholder="请输入名称"
                      style="width: 200px;" @keyup.enter.native="handleFilter"/>
            <el-button class="filter-item" icon="el-icon-search" type="primary" @click="handleFilter"> 搜索</el-button>
            <el-button class="filter-item" icon="el-icon-search" type="default" @click="searchReset"> 重置</el-button>
            <el-button class="filter-item" icon="el-icon-edit" style="margin-left: 10px;" type="primary"
                       @click="handleCreate"> 新增
            </el-button>
        </div>

        <!-- 表格-内容区域 -->
        <el-table :key="tableKey" v-loading="listLoading" :data="tableList" border fit highlight-current-row
                  style="width: 100%;">
            <el-table-column v-for="column in columns" :key="column.prop"
                             :align="column.align?column.align:'center'"
                             :fixed="column.fixed"
                             :formatter="column.formatter"
                             :label="column.label"
                             :min-width="column.minWidth"
                             :prop="column.prop"
                             :sortable="column.sortable"
                             :type="column.type" :width="column.width">
                <template slot-scope="scope">
                    <!-- 行内显示图片 -->
                    <img v-if="column.imgFlag==true"
                         :src=" scope.row[column.prop].indexOf('http://') >-1 ?  scope.row[column.prop] : ( CMBASE.baseFileContext + scope.row[column.prop] ) "
                         alt="" class="img" height="60" width="60"/>
                    <!-- 行内显示开关按钮 -->
                    <el-switch v-else-if="column.switchFlag==true" v-model="scope.row[column.prop]" :active-value="1"
                               :inactive-value="0" disabled></el-switch>
                    <!-- 行内显示tag标签 -->
                    <span v-else-if="column.tagFlag==true">
                        <span v-for="item in column.tagFormatter" :key="item.value">
                            <el-tag v-if="item.value==scope.row[column.prop]" :type="item.type">{{item.text}}</el-tag>
                        </span>
                    </span>
                    <!-- 行内格式自定义 -->
                    <span v-else-if="column.formatter"> {{column.formatter(scope.row)}}</span>
                    <span v-else-if="column.prop === 'type'">
                        {{ scope.row['type'] | productType(productTypeList) }}
                    </span>
                    <!--默认显示文本-->
                    <span v-else>{{scope.row[column.prop]}}</span>
                </template>
            </el-table-column>

            <el-table-column align="center" class-name="small-padding" label="操作" width="440">
                <template slot-scope="scope">
                    <el-button size="mini" type="primary" @click="handleUpdate(scope.row)"> 编辑 </el-button>
                    <el-button size="mini" type="danger" @click="handleDelete(scope.row)"> 删除 </el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 表格-页脚区域 -->
        <pagination v-show="tableTotal>0" :limit.sync="pageRequest.pageSize" :page.sync="pageRequest.pageNum" :total="tableTotal" @pagination="getList"/>

        <!--新增编辑界面-->
        <el-dialog :close-on-click-modal="false" :title="operation?'新增':'编辑'" :visible.sync="dialogFormVisible" top="5vh" width="45%">
            <el-form ref="dataForm" :model="dataForm" :rules="dataFormRules" label-width="140px" style="width: 80%">

                <el-form-item label="名称" prop="name">
                    <el-input v-model="dataForm.name" auto-complete="off" placeholder="请输入名称"/>
                </el-form-item>
                <el-form-item label="商品类型" prop="type">
                    <el-select v-model="dataForm.type" placeholder="请选择商品类型" >
                        <el-option v-for="type in productTypeList"
                                   :key="type.id"
                                   :label="type.name"
                                   :value="type.id">
                        </el-option>
                    </el-select>
                </el-form-item>
<!--                <el-form-item label="价格" prop="price">-->
<!--                    <el-input v-model="dataForm.price" auto-complete="off" placeholder="请输入价格"/>-->
<!--                </el-form-item>-->
                <el-form-item label="在售价格" prop="salePrice">
                    <el-input v-model="dataForm.salePrice" auto-complete="off" placeholder="请输入在售价格"/>
                </el-form-item>
<!--                <el-form-item label="是否推荐" prop="isRecommend">-->
<!--                    <el-radio-group v-model="dataForm.isRecommend">-->
<!--                        <el-radio :label="0">不是</el-radio>-->
<!--                        <el-radio :label="1">是</el-radio>-->
<!--                    </el-radio-group>-->
<!--                </el-form-item>-->
<!--                <el-form-item label="商品描述" prop="description">-->
<!--                    <el-input type="textarea" v-model="dataForm.description" maxlength="200" show-word-limit  placeholder="请输入商品描述"/>-->
<!--                </el-form-item>-->
                <el-form-item label="设备模型" prop="deviceModel">
                    <el-radio-group v-model="dataForm.deviceModel">
                        <el-radio :label="1">安卓</el-radio>
                        <el-radio :label="2">ios</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item v-if="dataForm.deviceModel === 2" label="ios平台价格id" prop="iosPriceId">
                    <el-input v-model="dataForm.iosPriceId" auto-complete="off" placeholder="请输入ios平台价格id"/>
                </el-form-item>
<!--                <el-form-item label="时效性" prop="timeType">-->
<!--                    <el-radio-group v-model="dataForm.timeType">-->
<!--                        <el-radio :label="0">无限</el-radio>-->
<!--                        <el-radio :label="1">一个月</el-radio>-->
<!--                        <el-radio :label="2">一季度</el-radio>-->
<!--                        <el-radio :label="3">一年</el-radio>-->
<!--                    </el-radio-group>-->
<!--                </el-form-item>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button size="mini" @click.native="closeDialog()">取消</el-button>
                <el-button :loading="editLoading" size="mini" type="primary" @click.native="saveFormData()">提交 </el-button>
            </div>
        </el-dialog>


    </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 分页栏信息
import { getJdProductList, saveJdProduct, editJdProduct, deleteJdProduct,getJdProductTypeList} from '@/api/modules/product'
import Tinymce from '@/components/RichText'
import {getJdMsgTypeList} from "@/api/modules/msg";
import {getListByTypeId} from "@/api/modules/match"; // 富文本编辑器引入

export default {
    name: 'aboutUs',
    components: {
        Pagination,
        Tinymce,
    },
    directives: {   },
    filters: {
        productType(value, list) {
            const item = list.find(item => item.id === value)
            return item ? item.name : ""
        }
    },
    data() {
        return {
            tableKey: 0,
            tableList: [],//表格数据源
            tableTotal: 0,//表格总条数数据
            listLoading: true,
            pageRequest: { pageNum: 1, pageSize: 10, },
            searchParam:{},
            dialogFormVisible: false,//默认不显示弹出框
            operation: true, // true:新增, false:编辑
            editLoading: false,//保存表单时loading框
            columns: [
                {prop: 'name',  label: '名称',  sortable:false  },
                {prop: 'type',  label: '类型',  sortable:false  },
                // {prop: 'ct',  label: '创建时间',  sortable:false  },
                // {prop: 'price',  label: '价格',  sortable:false  },
                {prop: 'salePrice',  label: '在售价格',  sortable:false  },
                // {prop: 'iosPriceId',  label: 'ios平台价格id',  sortable:false  },
                // {
                //     prop: 'isRecommend', label: '是否推荐', sortable: false, tagFlag: true,
                //     tagFormatter: [
                //         {text: '否', value: 0, type: 'warning'},
                //         {text: '是', value: 1, type: 'success'}
                //     ]
                // },
                // {prop: 'description',  label: '商品描述',  sortable:false  },
                {
                    prop: 'deviceModel', label: '设备', sortable: false, tagFlag: true,
                    tagFormatter: [
                        {text: '安卓', value: 1, type: 'warning'},
                        {text: 'ios', value: 2, type: 'success'}
                    ]
                },
                // {prop: 'exchangeRate',  label: '金币比率',  sortable:false  },
                // {
                //     prop: 'timeType', label: '时效性', sortable: false, tagFlag: true,
                //     tagFormatter: [
                //         {text: '无限', value: 0, type: 'warning'},
                //         {text: '一个月', value: 1, type: 'success'},
                //         {text: '一季度', value: 2, type: 'success'},
                //         {text: '一年', value: 3, type: 'success'},
                //     ]
                // },
            ],
            fileList: [],
            // 新增编辑界面数据
            dataForm: {},
            //表单检验规则
            dataFormRules: {
                // id: [ { required: true, message: '请输入', trigger: 'blur' } ],
                name: [ { required: true, message: '请输入名称', trigger: 'blur' } ],
                type: [ { required: true, message: '请输入类型', trigger: 'blur' } ],
                salePrice: [ { required: true, message: '请输入在售价格', trigger: 'blur' } ],
                deviceModel: [ { required: true, message: '请输入设备模型', trigger: 'blur' } ],
            },
            productTypeList: [],
        }
    },
    methods: {
        //获取表格数据
        getList() {
            this.listLoading = true
            //【API请求】----获取表格列表数据
            getJdProductList(this.pageRequest).then(response => {
                response = response.result
                this.tableList = response.content
                this.tableTotal = response.total
                this.listLoading = false;
            }).catch((res) => {
                this.$message({  message: res.msg, type: 'error' })
            })
        },
        //表格数据筛选
        handleFilter() {
            this.pageRequest.searchParam = this.searchParam
            this.getList()
        },
        //【按钮点击】--- 弹出新增表单
        handleCreate() {
            this.operation = true;
            this.initDataForm();
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
                this.editLoading = false;
            })
        },
        //【按钮点击】--- 弹出编辑表单
        handleUpdate(row) {
            this.operation = false;
            this.dataForm = Object.assign({}, row)
            //显示编辑菜单
            this.dialogFormVisible = true
            this.$nextTick(() => {
                this.$refs['dataForm'].clearValidate()
                this.editLoading = false;
            })
        },
        //保存表单数据
        saveFormData() {
            let res
            this.$refs['dataForm'].validate(async(valid) => {
                if (!valid) {
                    return false;
                }
                this.editLoading = true;
                //【API请求】----保存数据
                if (this.dataForm.id === null || this.dataForm.id === ''){
                    res = await saveJdProduct(this.dataForm)
                } else {
                    res = await editJdProduct(this.dataForm)
                }
                try {
                    if (res.code === 0) {
                        this.dialogFormVisible = false// 关闭表单页面
                        this.initDataForm()// 重置表单数据
                        this.getList()// 重新获取表格数据
                        this.$notify({ title: '成功', message: '保存成功', type: 'success', duration: 2000 })
                    }else if(res.code === 500){
                        this.$notify({ title: '失败', message: res.message, type: 'error', duration: 2000 })
                        this.editLoading = false// 关闭loading框
                        return
                    }
                    this.editLoading = false// 关闭loading框
                } catch (e) {
                    throw e
                }
            })
        },
        //【按钮点击】---删除行
        handleDelete(row) {
            this.$confirm('确认删除该记录吗？', '提示', {}).then(() => {
                //【API请求】---- 删除数据
                deleteJdProduct(row.id).then(() => {
                    this.$message({  message: '操作成功', type: 'success' })
                    this.getList();
                })
            }).catch(() => {
                this.$message({  message: '操作失败', type: 'error' })
            });
        },
        //初始化表单数据，重新渲染
        initDataForm(){
            this.dataForm = {
                id: '' ,
                title: '' ,
                content: '' ,
            };
        },
        //关闭表单弹出框
        closeDialog() {
            this.$refs['dataForm'].resetFields();
            this.dialogFormVisible = false
        },
        // 重置按钮
        searchReset() {
            this.searchParam = {}
            this.pageRequest = {pageNum: 1, pageSize: 10}
            this.getList()
        },
        //商品类型
        getJdProductTypeList() {
            getJdProductTypeList().then(response => {
                this.productTypeList = response.result.list
            }).catch((res) => {
                this.$message({message: res.msg, type: 'error'})
            })
        },
        // handleTypeChange(value) {
        //     this.getItemList(value)
        // },
        // getItemList(typeId) {
        //     getListByTypeId({typeId: typeId}).then(response => {
        //         this.itemList = response.result
        //     }).catch((res) => {
        //         this.$message({message: res.msg, type: 'error'})
        //     })
        // },
    },
    created() {
        this.getList();
        this.getJdProductTypeList();
    },
}
</script>
